
import React, { Component } from 'react'

// import './index.css'

export default class index extends Component {

    //删除已完成的任务

    handleDelete(){

        // const {todos} =this.props

        // const nofinishedArr = todos.filter(item => {

        //     return item.status === 0

        // })

        // console.log(nofinishedArr)

        if(window.confirm("确定删除吗")){

            this.props.DeletetodoAll()

        }

    }

    handleCheckAll() {

        const {todos} = this.props

        const list = todos.map(item => {

            return {...item, status: 1}

        })

        // let list2 = todos

        // todos.forEach(item => {

        //     item.status = 1

        // })

        this.props.CheckTodoAll(list)

    }

    render() {

        const {todos} =this.props

        const finishedArr = todos.filter(item => {

            return item.status === 1

        })

        return (

            <div className="todo-footer">

                <label>

                    <input type="checkbox" onClick={() => this.handleCheckAll()}/>

                </label>

                <span>

                    <span>已完成{finishedArr.length}</span> / 全部{todos.length}

                </span>

                <button onClick={() => {this.handleDelete()}} className="btn btn-danger">清除已完成任务</button>

            </div>

        )

    }

}
